<template>
  <div>
    <!-- <input type="text" :value="num" /> -->
    <!-- 通过checkbox 多选框-->
    <!-- <input type="checkbox" :checked='flag'><span>多选框</span> -->
    <!-- v-on用于绑定事件 -->
    <!-- v-on语法:v-on:事件触发类型 -->
    <!-- 第一种写法 ：v-on：事件名=‘要执行的少量代码’-->
    <!-- <button v-on:click='num+=1'>按钮</button> -->
    <!-- 第二种写法:v-on:事件名='methods中的函数名' -->
    <!-- <button v-on:click='fn'>按钮</button> -->
    <!-- 第三种写法：v-on:事件名='methods中的函数名（实参）' -->
    <!-- <button v-on:click="fn1(10)">按钮</button> -->
    <!-- 点击按钮+10 -->
    <!-- v-on可以缩写成@  -->
    <!-- <p>{{ num }}</p> -->

    <!-- 课堂小案例 -->
    <button @click="fn1(3000)">发工资啦,我的工资是3000</button><br />
    <button @click="fn1(-2800)">给喜欢的女主播刷了火箭-2800</button><br />
    <button @click="fn1(+10000)">送外卖赚了10000</button><br />
    <button @click="fn1(-18000)">给暗恋的女生买了爱马仕-18000</button><br />
    <button @click="fn1(+8000)">晚上去做代驾赚了8000</button><br />
    <button @click="fn1(-100)">买泡面100</button><br />
    <button @click="fn1(-50)">买挂逼水50</button><br />
    <p>这个月剩{{ num }}元</p>
  </div>
</template>

<script>
export default {
  // data存数据
  data() {
    return {
      // num: 'ikun',
      num: 0,
      // str: '鸡你太美',
    }
  },
  // methods 存事件
  methods: {
    fn() {
      // this指向组件实例
      console.log(this.str)
    },
    fn1(num) {
      this.num += num
    },
  },
}
</script>

<style></style>
